<template>
  <div class="consultation-container">
    <!-- 顶部导航 -->
    <header class="header">
      <div class="header-content">
        <button class="back-button" @click="goBack">
          <i class="fas fa-chevron-left"></i>
        </button>
        <h1 class="header-title">咨询节点与日志</h1>
        <div class="header-placeholder"></div>
      </div>
    </header>

    <main class="main-content">
      <!-- 时间轴节点 -->
      <section class="card fade-in">
        <div class="card-header">
          <div class="icon-container">
            <i class="fas fa-stream"></i>
          </div>
          <h2 class="card-title">咨询关键节点</h2>
        </div>

        <div class="timeline-container">
          <!-- 时间轴竖线 -->
          <div class="timeline-line"></div>

          <!-- 预约节点 -->
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content status-completed">
              <div class="timeline-header">
                <h3 class="timeline-title">预约咨询时间</h3>
                <span class="status-badge">已完成</span>
              </div>
              <p class="timeline-date">2023年10月15日 14:30</p>
            </div>
          </div>

          <!-- 开始节点 -->
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content status-completed">
              <div class="timeline-header">
                <h3 class="timeline-title">咨询开始时间</h3>
                <span class="status-badge">已完成</span>
              </div>
              <p class="timeline-date">2023年10月20日 10:05</p>
            </div>
          </div>

          <!-- 结束节点 -->
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content status-completed">
              <div class="timeline-header">
                <h3 class="timeline-title">咨询结束时间</h3>
                <span class="status-badge">已完成</span>
              </div>
              <p class="timeline-date">2023年10月20日 11:20</p>
            </div>
          </div>

          <!-- 建议节点 -->
          <div class="timeline-item">
            <div class="timeline-dot"></div>
            <div class="timeline-content status-new">
              <div class="timeline-header">
                <h3 class="timeline-title">咨询建议</h3>
                <span class="status-badge new">新建议</span>
              </div>
              <p class="timeline-date">2023年10月20日 15:40</p>
              <button class="view-details-btn" @click="scrollToSuggestions">
                查看详细建议 <i class="fas fa-chevron-right"></i>
              </button>
            </div>
          </div>
        </div>
      </section>

      <!-- 咨询建议 -->
      <section class="card fade-in" ref="suggestionsSection">
        <div class="card-header">
          <div class="icon-container">
            <i class="fas fa-lightbulb"></i>
          </div>
          <h2 class="card-title">专业咨询建议</h2>
        </div>

        <div class="suggestions-content">
          <p class="suggestions-text">
            根据本次咨询情况，我建议您在接下来的两周内重点关注以下练习：
          </p>

          <div class="suggestions-list">
            <div class="suggestion-item">
              <div class="suggestion-number">1</div>
              <p class="suggestion-text">
                每日进行10分钟的正念呼吸练习，帮助您减轻焦虑情绪
              </p>
            </div>

            <div class="suggestion-item">
              <div class="suggestion-number">2</div>
              <p class="suggestion-text">
                使用"情绪日记"记录每天的情绪波动和触发点
              </p>
            </div>

            <div class="suggestion-item">
              <div class="suggestion-number">3</div>
              <p class="suggestion-text">
                尝试渐进式肌肉放松练习，特别是在睡前进行
              </p>
            </div>

            <div class="suggestion-item">
              <div class="suggestion-number">4</div>
              <p class="suggestion-text">每周安排至少两次30分钟的身体活动</p>
            </div>
          </div>

          <!-- 图片占位 -->
          <div class="image-placeholder">
            <div class="placeholder-content">
              <i class="fas fa-image"></i>
              <p>练习示意图</p>
            </div>
          </div>
        </div>
      </section>

      <!-- 推荐资源 -->
      <section class="card fade-in">
        <div class="card-header">
          <div class="icon-container">
            <i class="fas fa-book-open"></i>
          </div>
          <h2 class="card-title">推荐学习资源</h2>
        </div>

        <div class="resources-grid">
          <!-- 冥想资源 -->
          <div class="resource-card" @click="openResource('正念呼吸引导')">
            <div class="resource-image meditation">
              <i class="fas fa-spa"></i>
            </div>
            <div class="resource-info">
              <span class="resource-tag">冥想</span>
              <h3 class="resource-title">正念呼吸引导</h3>
              <p class="resource-desc">10分钟基础练习</p>
            </div>
          </div>

          <!-- 咨询师推荐 -->
          <div class="resource-card" @click="openResource('张明华 咨询师')">
            <div class="resource-image counselor">
              <i class="fas fa-user-md"></i>
            </div>
            <div class="resource-info">
              <span class="resource-tag">咨询师</span>
              <h3 class="resource-title">张明华 咨询师</h3>
              <p class="resource-desc">情绪管理专家</p>
            </div>
          </div>

          <!-- 音频资源 -->
          <div class="resource-card" @click="openResource('放松音乐合集')">
            <div class="resource-image audio">
              <i class="fas fa-headphones"></i>
            </div>
            <div class="resource-info">
              <span class="resource-tag">音频</span>
              <h3 class="resource-title">放松音乐合集</h3>
              <p class="resource-desc">自然声音与轻音乐</p>
            </div>
          </div>

          <!-- 视频资源 -->
          <div class="resource-card" @click="openResource('焦虑缓解练习')">
            <div class="resource-image video">
              <i class="fas fa-video"></i>
            </div>
            <div class="resource-info">
              <span class="resource-tag">视频</span>
              <h3 class="resource-title">焦虑缓解练习</h3>
              <p class="resource-desc">15分钟指导视频</p>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 底部操作栏 -->
    <div class="bottom-actions">
      <button class="save-btn" @click="saveLog">
        <i class="fas fa-bookmark"></i>保存日志
      </button>
      <button class="share-btn" @click="shareContent">
        <i class="fas fa-share-alt"></i>分享
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: "ConsultationTimeline",
  mounted() {
    // 添加渐入动画
    const cards = document.querySelectorAll(".fade-in");
    cards.forEach((card, index) => {
      card.style.animationDelay = `${index * 0.1}s`;
    });
  },
  methods: {
    goBack() {
      alert("返回上一页");
    },
    scrollToSuggestions() {
      this.$refs.suggestionsSection.scrollIntoView({
        behavior: "smooth",
      });
    },
    openResource(title) {
      alert(`打开资源: ${title}`);
    },
    saveLog() {
      alert("保存日志操作");
    },
    shareContent() {
      alert("分享操作");
    },
  },
};
</script>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

/* 全局样式 */
.consultation-container {
  font-family: "Noto Sans SC", sans-serif;
  background-color: #f8fafc;
  color: #1e293b;
  line-height: 1.6;
  padding-bottom: 80px;
}

/* 顶部导航 */
.header {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.back-button {
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
}

.header-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

.header-placeholder {
  width: 24px;
}

/* 主内容区 */
.main-content {
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 卡片样式 */
.card {
  background-color: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.icon-container {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  padding: 8px;
  border-radius: 8px;
  margin-right: 12px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0;
}

/* 时间轴样式 */
.timeline-container {
  position: relative;
  padding-left: 32px;
  margin-top: 16px;
}

.timeline-line {
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #c7d2fe, #a5b4fc, #818cf8);
}

.timeline-item {
  position: relative;
  padding-bottom: 32px;
}

.timeline-dot {
  position: absolute;
  left: -25px;
  top: 0;
  width: 16px;
  height: 16px;
  border: 3px solid #6366f1;
  background: white;
  border-radius: 50%;
}

.timeline-content {
  background-color: #eef2ff;
  border-left: 4px solid #6366f1;
  border-radius: 0 8px 8px 0;
  padding: 16px;
}

.timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.timeline-title {
  font-weight: 500;
  color: #1e293b;
  margin: 0;
}

.status-badge {
  font-size: 12px;
  color: #64748b;
  background-color: #f1f5f9;
  padding: 4px 8px;
  border-radius: 16px;
}

.status-badge.new {
  color: #6366f1;
  background-color: #eef2ff;
}

.timeline-date {
  font-size: 14px;
  color: #64748b;
  margin-top: 4px;
  margin-bottom: 0;
}

.view-details-btn {
  margin-top: 12px;
  font-size: 12px;
  background-color: #6366f1;
  color: white;
  padding: 4px 12px;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.view-details-btn i {
  font-size: 10px;
  margin-left: 4px;
}

/* 咨询建议样式 */
.suggestions-content {
  background-color: #eef2ff;
  border-radius: 8px;
  padding: 16px;
}

.suggestions-text {
  color: #374151;
  margin-bottom: 16px;
}

.suggestions-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.suggestion-item {
  display: flex;
  align-items: flex-start;
}

.suggestion-number {
  background-color: #e0e7ff;
  color: #6366f1;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

.suggestion-text {
  color: #374151;
  margin: 0;
}

.image-placeholder {
  margin-top: 16px;
  background: linear-gradient(to right, #e0e7ff, #ddd6fe);
  border-radius: 8px;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #818cf8;
}

.placeholder-content {
  text-align: center;
}

.placeholder-content i {
  font-size: 32px;
  margin-bottom: 8px;
}

.placeholder-content p {
  font-size: 14px;
  margin: 0;
}

/* 推荐资源样式 */
.resources-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.resource-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #f1f5f9;
  transition: all 0.3s ease;
  cursor: pointer;
}

.resource-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.resource-image {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6366f1;
  background: linear-gradient(to right, #e0e7ff, #ddd6fe);
}

.resource-image i {
  font-size: 32px;
}

.resource-info {
  padding: 12px;
}

.resource-tag {
  font-size: 12px;
  font-weight: 500;
  color: #6366f1;
  background-color: #eef2ff;
  padding: 4px 8px;
  border-radius: 16px;
}

.resource-title {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  margin: 8px 0 4px;
}

.resource-desc {
  font-size: 12px;
  color: #64748b;
  margin: 0;
}

/* 底部操作栏 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: white;
  border-top: 1px solid #e2e8f0;
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
}

.bottom-actions button {
  flex: 1;
  font-weight: 500;
  padding: 12px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.save-btn {
  background-color: #f1f5f9;
  color: #6366f1;
  margin-right: 8px;
}

.share-btn {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: white;
  margin-left: 8px;
}

/* 动画效果 */
.fade-in {
  animation: fadeIn 0.5s ease-in-out forwards;
  opacity: 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>
